유효범위(Scope)는 변수의 수명을 의미한다. JS에서 함수 내에 선언한 변수는 지역변수가 되고, 함수 밖에서 선언한 변수는 전역변수가 된다.

var 를 빼고 선언하면, 함수 내에서 선언하더라도 전역 변수로 선언된다.

function fscope(){
	vscope = 'xx';
    console.log(vscope); // xx
}
fscope();
console.log(vscope); // xx

함수 내에서 var를 생략했을 때는, 먼저 지역변수를 체크하고 없다면 전역변수로 변수를 할당한다.

함수 스코프만 존재한다! : {} 스코프는 없음.

for (var i = 0; i < 1; i++) {
  var name = 'hahaha';
}
alert(name); // hahaha -> 잘 동작!

java와 같은 {}함수 스코프를 쓰는 언어에서는 에러가 날 것이다.

정적 유효범위(statical scoping), 혹은 렉시컬(lexical scoping)

사용할때, 해당 함수 스코프에서 지역변수가 없으면 전역변수를 사용.

var i = 5;

function a() {
  var i = 10;
  b();
}

function b() {
  document.write(i); // 5
}

a();

전역변수를 불가피하게 사용할 때

익명함수를 활용하여, 전역 변수를 지역변수화.

익명함수 선언 및 호출 후 () 괄호로 묶어줌.

(function() {
  var MYAPP = {}
  MYAPP.calculator = {
    'left' : null,
    'right' : null
  }
  MYAPP.coordinate = {
    'left' : null,
    'right' : null
  }
  MYAPP.calculator.left = 10;
  MYAPP.calculator.right = 20;
}())

컨텍스트

실행 컨텍스트는 다른 데이터가 접근 가능한지, 어떻게 행동할지(?) 규정되는 곳인다. 보통 this로 자신의 컨텍스트 값들을 접근할 수 있다.

가장 바깥 컨텍스트는 전역 컨텍스트(Window)이다.
함수 정의
1. JS 인터프리터 : (전역변수 객체 + 해당 함수 객체)를 함수 내부 [[Scope]] 프로퍼티에 저장한다.
함수 호출
1. 실행 컨텍스트 생성
2. [[Scope]] 프로퍼티 복사
3. 스코프 체인 생성
4. arguments를 포함한 활성화 객체 만들어짐.
5. 스코프 체인 첫째에 활성화 객체가 위치하고, 둘째에 전역 밴수 객체가 위치.
함수 실행 끝
1. 활성화 객체 파괴

스코프 체인? 실행중인 컨텍스트가 접근할 수 있는 모든 변수와 함수에 순서가 정의되어 있다.

var color = "blue";
function changeColor() {
    if(color === "blue") {
        color = "red";
    }
  	else {
        color = "blue";
    }
}

위 changeColor()가 실행되면, 스코프 체인이 만들어지고, 체인의 앞쪽에는 함수자체의 변수객체와 전역 컨텍스트의 변수 객체가 들어 있다. color 변수는 함수자체의 스코프 체인에서 찾을 수 있으므로 접근이 가능하다. 없으면 스코프 체인을 따라 한단계 올라가, 전역 컨텍스트의 변수객체에 접근한다.

Reference

프론트엔드 개발자를 위한 자바스크립트 프로그래밍, 니콜라스 자카스

https://www.inflearn.com/course/%EC%A7%80%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%96%B8%EC%96%B4-%EA%B8%B0%EB%B3%B8/%EC%A0%84%EC%97%AD%EB%B3%80%EC%88%98%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94-%EB%B2%95/

02.3. 유효범위와 컨텍스트

전역변수를 불가피하게 사용할 때

컨텍스트

Reference

Junho Nam